<template xmlns="http://www.w3.org/1999/html">
    <div class="sea-main-form">
        <sea-form :model="form_data" :rules="form_rules"
                   :succeed="props.succeed" :submit=" config.create">
            <el-form-item label="ID" prop="id">
                <el-input v-model="form_data.id" placeholder="ID"></el-input>
            </el-form-item>
            <el-form-item label="库名" prop="schemaName">
                <el-input v-model="form_data.schemaName" placeholder="库名"></el-input>
            </el-form-item>
            <el-form-item label="表名" prop="tableName">
                <el-input v-model="form_data.tableName" placeholder="表名"></el-input>
            </el-form-item>
            <el-form-item label="列名" prop="columnName">
                <el-input v-model="form_data.columnName" placeholder="列名"></el-input>
            </el-form-item>
            <el-form-item label="默认样式" prop="defaultStyle">
                <el-input v-model="form_data.defaultStyle" placeholder="默认样式"></el-input>
            </el-form-item>
            <el-form-item label="是否可编辑" prop="editable">
                <el-switch v-model="form_data.editable" placeholder="是否可编辑"></el-switch>
            </el-form-item>

            <el-form-item label="表别名" prop="tableAlias">
                <el-input v-model="form_data.tableAlias" placeholder="表别名（中文）"></el-input>
            </el-form-item>
            <el-form-item label="列别名" prop="columnAlias">
                <el-input v-model="form_data.columnAlias" placeholder="列别名（中文）"></el-input>
            </el-form-item>
        </sea-form>
    </div>
</template>

<script setup lang="ts">
import config from "./config.ts";
import {reactive} from "vue";

/**
 * 修改界面
 */
interface Props {
    // 需要操作的数据对象
    object?: Record<string, any>;
    // 成功回调，通常是刷新数据表格
    succeed?: () => void
}

const props = withDefaults(defineProps<Props>(), {
});

// 表单数据列表
const form_data = reactive(config.formModel());
// 表单数据校验
const form_rules = reactive(config.formRules);

</script>
